<template>
  <el-dialog
    ref="dialogConfirmRef"
    v-dialogDrag
    :append-to-body="true"
    :modal-append-to-body="true"
    :modal="true"
    :close-on-click-modal="false"
    title="提示"
    :visible="visible"
    width="23%"
    @close="()=>{cancel()}"
  >
    <div style="display: flex;align-items: center">
      <i class="el-icon-warning" style="font-size: 24px;color: #e6a23c" />
      <div style="padding: 0 12px;line-height: 1.5">
        <div v-for="(item,index) in message" :key="index">{{ item }}</div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer" style="width: 100%">
      <el-button class="pms-zr-button" @click="cancel">取 消</el-button>
      <el-button class="pms-zr-button-primary" style="color: #fff !important;background: #eb4b4b !important;border: none !important; margin-left: 10px !important;" @click="confirm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
    name: 'DialogConfirm',
    components: {},
    props: {
        message: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            visible: true
        }
    },
    created() {
        console.log(2222222)
    },
    mounted() {
        this.$nextTick(() => {
            this.dialogEl('dialogConfirmRef')
        })
    },
    methods: {
        confirm() {
            this.$emit('changeStatus', true)
        },
        cancel() {
            this.visible = false
            this.$emit('changeStatus', false)
        },
        // 将弹框挂载在最外层
        dialogEl(refName) {
            const contentBody = window.top.document.body
            this.$nextTick(() => {
                const dialogModal = document.querySelector('.v-modal')
                const elBody = this.$refs[refName].$el
                dialogModal.style.zIndex = 4000
                elBody.style.zIndex = 4001
                contentBody.appendChild(elBody)
                contentBody.appendChild(dialogModal)
            })
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
    border-radius: 4px !important;
    top:50%;
    transform: translateY(-50%);
    margin-top: 0 !important;
}

::v-deep .el-dialog__header {
    padding: 15px 15px 10px;
}

::v-deep .el-dialog__footer{
    padding:10px 15px 20px;
}

::v-deep .el-dialog__headerbtn {
    top: 20px !important;
}

::v-deep .el-dialog__body{
    padding: 10px 15px !important;
}
</style>
